<template>
  <div class="container">
    <div class="headCont">
        <div class="logoCont">
          <img src="static/img/logo.png" />
          <div class="logoText">
            <div class="logoName">同橙优享</div>
            <div class="logoEng">Enjoy with orange</div>
          </div>
        </div>
        <div class="navCont">
          <div :class="navId==index?'navItem navItemActive':'navItem'" @click="navFn(item)" :key="index" v-for="(item,index) in navArr">
            <div>{{item.val}}</div>
            <div v-if="navId==index" class="navLine"></div>
            <div v-if="navId!=index" class="navLine_no"></div>
          </div>
          <div class="telCont">
            <div class="telNum">
              <div class="iconfont icon-24gl-phone24h"></div> 
              <div>18483613963</div>
            </div>
          </div>
        </div>
    </div>
    <div class="bannerCont">
      <div class="bannerMask">
        <div class="maskLeft">
          <div class="maskTitle">共创未来教育新篇章！</div>
          <div class="maskdes">把握教育行业的未来趋势，打造更加美好的学习明天！</div>
          <div class="maskVal">
            <p>随着教育行业的迅速发展，家长对于孩子教育的重视程度日益提升，上门家教市场需求激增。我们推出的创新型上门家教软件，为学生提供了个性化、高效的学习方案。</p>
            <p>我们提供的上门家教软件将为您实现这个梦想！每个城市只出售给一个创业者，绝对无竞争，让您独享市场红利，成就您的创业传奇！</p>
          </div>
          <a href="#JoinInput" class="maskBtn">申请资格</a>
        </div>
        <img src="static/img/bannerImg1.png" />
      </div>
    </div>
    <div class="productCont">
      <div class="contName">
        <div class="contName_china">同城家教-产品展示</div>
        <div class="contName_Eng">Product display</div>
      </div>
      <div class="rowNavCont">
        <div @click="rowNavFn(item)" :class="item.id==rowNavId?'rowNavItem rowNavActive':'rowNavItem'" :key="index" v-for="(item,index) in rowNavArr">{{ item.val }}</div>
        <div class="rowNavLine" :style="'left: '+rowNavId*300+'px'"></div>
      </div>
      <div class="productMain">
        <div class="productNav">
          <div @click="productNavFn(index)" :class="productNavId==index?'productNavItemActive':'productNavItem'" :key="index" v-for="(item,index) in productNavArr">
            <img :src="item.img" />
            <div class="productNavName">{{item.val}}</div>
          </div>
        </div>
        <div class="productSwiper">
          <div class="productItem" v-if="!rowNavArr[rowNavId].isPc">
            <div class="phoneBox">
              <img class="phoneImg" src="static/img/phoneImg.png" />
              <div class="productImgCont">
                <img class="productImg" :src="productNavArr[productNavId].goodsImg" />
              </div>
            </div>
            <div class="phoneBox" v-if="productNavArr[productNavId].detailImg">
              <img class="phoneImg" src="static/img/phoneImg.png" />
              <div class="productImgCont">
                <img class="productImg" :src="productNavArr[productNavId].detailImg" />
              </div>
            </div>
            <div class="productInfo">
              <div class="productInfoName">{{productNavArr[productNavId].val}}</div>
              <div class="productInfoDes">
                <ul>
                  <li :key="index" v-for="(item,index) in productNavArr[productNavId].desArr">{{ item.val }}</li>
                </ul>
              </div>
            </div>
          </div>
          <div class="productItem PCProduct" v-if="rowNavArr[rowNavId].isPc">
            <div class="">
              <div class="productInfoName">{{productNavArr[productNavId].val}}</div>
              <div class="productInfoDes">
                <ul>
                  <li :key="index" v-for="(item,index) in productNavArr[productNavId].desArr">{{ item.val }}</li>
                </ul>
              </div>
            </div>
            <div class="PCFlex">
              <div class="PCBox">
                <img class="PCImg" src="static/img/PCImg2.png" />
                <div class="PCProductImg">
                  <img class="productImg" :src="productNavArr[productNavId].goodsImg" />
                </div>
              </div>
              <div class="PCBox" v-if="productNavArr[productNavId].detailImg">
                <img class="PCImg" src="static/img/PCImg2.png" />
                <div class="PCProductImg">
                  <img class="productImg" :src="productNavArr[productNavId].detailImg" />
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="productCont hasBg" style="margin-top: 100px;">
      <div class="contName">
        <div class="contName_china">上门家教前景</div>
        <div class="contName_Eng">Product prospect</div>
      </div>
      <div class="goodCont">
        <div class="goodItem" :key="index" v-for="(item,index) in goodArr">
          <img class="goodImg" :src="item.img" />
          <div class="goodText">
            <div class="goodName">
              <div class="goodLine"></div>
              <div>{{ item.name }}</div>
            </div>
            <div class="goodDes">{{ item.des }}</div>
          </div>
        </div>
      </div>
    </div>
    <div class="productCont" style="margin-top: 100px;">
      <div class="contName">
        <div class="contName_china">订单流程图</div>
        <div class="contName_Eng">Order flow chart</div>
      </div>
      <div class="orderStep">
        <img src="static/img/stepImg.png" />
      </div>
    </div>
    <div class="productCont hasBg" style="margin-top: 100px;">
      <div class="contName">
        <div class="contName_china">产品特点</div>
        <div class="contName_Eng">Product characteristics</div>
      </div>
      <div class="portCont">
        <div class="portItem" :key="index" v-for="(item,index) in portArr">
          <div class="portMask">
            <div class="portBtn">开通同城家教</div>
          </div>
          <div class="portImg">
            <img :src="item.img" />
          </div>
          <div class="portName">{{ item.name }}</div>
          <div class="portDes">{{ item.des }}</div>
        </div>
      </div>
    </div>
    <div class="productCont" style="margin-top: 100px;">
      <div class="contName">
        <div class="contName_china">运营指南</div>
        <div class="contName_Eng">Operation guide</div>
      </div>
      <div class="stepCont">
        <div class="stepItem" :key="index" v-for="(item,index) in stepArr">
          <div class="stepImg">
            <img :src="item.img" />
          </div>
          <div class="stepInfo">
            <div class="stepName">{{ item.name }}</div>
            <div class="stepVal">
              <ul>
                <li :key="b" v-for="(a,b) in item.arr">{{ a.val }}</li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="productCont" id="JoinInput" style="margin-top: 100px;">
      <div class="contName">
        <div class="contName_china">开通《同城家教》</div>
        <div class="contName_Des">如果您对我们的产品感兴趣，想在自己的城市开展《同城家教》项目。填写以下信息，我们将第一时间与您取得联系！</div>
      </div>
      <div class="sendCont">
          <div class="inputCont">
              <input type="text" placeholder="请输入您的姓名" />
          </div>
          <div class="inputCont">
              <input type="number" placeholder="请输入您的电话" />
          </div>
          <div class="subBtn">快速申请</div>
      </div>
    </div>
    <foot-com></foot-com>
  </div>
</template>

<script>
import topCom from '@/components/topCom';
import footCom from '@/components/footCom';
export default {
  components: {topCom,footCom},
  data() {
    return {
      navArr:[
        {val:'同城家教',url:'/home'},
        {val:'同城家政',url:'/clean'},
        // {val:'同城按摩',url:'/tech'},
      ],
      navId:0,
      rowNavArr:[
        {val:'用户端',id:0,arr:[
          {img:'static/img/homeIcon.png',val:'课程列表',goodsImg:'static/img/techerHome.png',desArr:[
            {val:'引领一对一家教新时代：轮播图汇聚一对一家教宣传，教师及商务合作招募，轻松了解家教行业最新动态。'},
            {val:'家教最新动态：家教最新公告信息，实时更新。'},
            {val:'首页标签：因材施教、一对一辅导、优质名师、在线客服等关键词标签。'},
            {val:'多元化课程，满足不同需求：九年义务各学科课程、兴趣培养课程、编程课程等丰富课程列表，满足孩子多元化学习需求，打造个性化学习之旅。'},
          ]},
          {img:'static/img/detailIcon.png',val:'课程详情',goodsImg:'static/img/techerDetail.png',detailImg:'static/img/techerDetail2.png',desArr:[
            {val:'精品课程：详细展示课程内容及不同教师级别的收费标准，确保为学生选择最合适的教学方案。'},
            {val:'课程亮点：课程亮点介绍，了解每个课程的独特之处，让孩子享受到更加专业、贴心的教学服务。'},
            {val:'课程内容：课程内容介绍，清晰呈现每堂课程的教学目标、内容安排，助力孩子全面提升学习水平。'},
            {val:'用户点评：用户好评反馈，让您借助他人的真实体验，更加有信心地选择理想的家教课程。'},
          ]},
          {img:'static/img/techerIcon.png',val:'课程教师',goodsImg:'static/img/techerInfo.png',detailImg:'static/img/techerInfo2.png',desArr:[
            {val:'基本信息：详细展示教师信息，包括姓名、头像、级别、年龄、评分等，快速了解每位教师的专业水平和教学经验。'},
            {val:'教师学历：教师工作经验、毕业学院、最高学历、教师资格证书等信息全面展示，确保选择的教师具备丰富的教学经验和专业知识。'},
            {val:'角质资质：教师成功案例、所获荣誉、自我介绍和教学经历展示，让您了解教师的教学成就和专业能力，为选择提供参考。'},
            {val:'选课下单：选择心仪所需的课程下单。'},
          ]},
          {img:'static/img/payOrderIcon.png',val:'支付订单',goodsImg:'static/img/techerPayOrder.png',detailImg:'static/img/techerPayOrder2.png',desArr:[
            {val:'灵活下单，价格透明：订单课程信息清晰呈现，包括总金额、课程选择时长、单价等，轻松了解订单费用，价格透明无隐忧。'},
            {val:'个性化需求，一键填写：下单信息填写简便快捷，涵盖家教服务地址、门牌号、联系电话等，满足您的个性化需求。'},
            {val:'性别选择：可根据性别偏好选择家教教师，确保您的学习环境更加舒适。'},
            {val:'时间安排：授课日期和时间选择自由灵活，让您按照自己的时间安排学习计划。'},
            {val:'特惠优惠，尽享实惠：可填写邀请码，享受特别优惠，让您的家教服务更加划算。'},
          ]},
          {img:'static/img/orderIcon.png',val:'用户订单',goodsImg:'static/img/techerOrder.png',detailImg:'static/img/techerOrder2.png',desArr:[
              {val:'订单列表展示：清晰展示订单列表，每个订单内容信息尽在掌握。'},
              {val:'订单搜索：订单可搜索，可选择不同类型搜索，让您快速定位所需订单，节省时间提高效率。'},
              {val:'订单状态：订单不同状态展示，让您清晰了解订单处理情况，随时跟进家教课程进程。'},
              {val:'一键支付，便捷快速：支持订单立即支付操作，让您轻松完成支付。'},
              {val:'订单管理灵活操作：支持订单删除操作、取消订单操作，让您灵活管理订单。'},
              {val:'订单详情：订单详情页面展示完整的订单信息资料，让您深入了解每个订单的具体内容。'},
          ]},
          {img:'static/img/ctrlIcon.png',val:'订单操作',goodsImg:'static/img/techerOrder3.png',detailImg:'static/img/techerOrder4.png',desArr:[
              {val:'订单举报：订单举报操作，填写举报内容，上传举报凭证，为您提供安全可靠的举报渠道，保障您的权益。'},
              {val:'订单评价：订单评价操作，上传评价图，分享您的家教体验，评价内容真实客观，评价分数清晰明了，共同促进家教服务的提升。'},
          ]},
          {img:'static/img/userIcon.png',val:'个人中心',goodsImg:'static/img/techerUser.png',detailImg:'static/img/techerUser2.png',desArr:[
            {val:'账号信息：个人信息、订单统计、消费统计一目了然。'},
            {val:'消费明细：消费类型包括消费和退款两种，每笔消费金额、订单号、消费时间清晰记录，让您对消费情况了如指掌。'},
          ]},
          {img:'static/img/joinIcon.png',val:'招募合作',goodsImg:'static/img/techerJoin.png',detailImg:'static/img/techerJoin2.png',desArr:[
              {val:'教师招募：通过平台发布家教招募需求，更快速便捷招募到兼职教师。'},
              {val:'商务合作：通过平台寻找有意向合作伙伴。'},
            ]},
          ]},
        {val:'教师端',id:1,arr:[
          {img:'static/img/loginIcon.png',val:'教师登录',goodsImg:'static/img/techerLogin.png',desArr:[
              {val:'保洁员登录：教师可通过自己的手机号和密码登录到管理系统，随时进行接单操作。'},
              {val:'招募教师信息：灵活的工作时间安排、丰厚的报酬待遇。'},
          ]},
          {img:'static/img/needIcon.png',val:'需求大厅',goodsImg:'static/img/techerNeedOrder.png',detailImg:'static/img/techerNeedOrder2.png',desArr:[
              {val:'家教需求订单：各类学科家教需求订单，需求大厅都会展示出来，教师根据自己的情况接单。'},
              {val:'系统自动派单：需求大厅订单根据用户下单之后，平台会核实，审核通过之后，系统自动派送到需求大厅。'},
              {val:'性别筛选：根据教师的性别筛选，确保教师接到最合适的订单。'},
              {val:'订单详细介绍：每条订单都清晰标注订单的授课内容信息、教师接单到手价格、预约的时间、地址和日期。'},
              {val:'接单功能：只需点击立即接单，即可接单成功；操作方便、简单。'},
          ]},
          {img:'static/img/moneyIcon.png',val:'资金管理',goodsImg:'static/img/techerSub.png',detailImg:'static/img/techerSub2.png',desArr:[
              {val:'提现展示：可提现金额展示，提现条件说明。'},
              {val:'申请提现：一键申请提现，流程简单快捷，后台审核通过即可打款。'},
              {val:'资金明细：记录每一笔资金来源、订单号、金额、日期等，记录您的资金流动，方便查阅核对。'},
              {val:'提现记录：记录每一笔提现信息，包括提现状态、提现时间、提现金额、提现订单号。'},
          ]},
          {img:'static/img/orderIcon.png',val:'接单记录',goodsImg:'static/img/techerRecordOrder2.png',detailImg:'static/img/techerRecordOrder.png',desArr:[
            {val:'接单记录：浏览您的历史接单记录，回顾每一次教学经历，感受成长的脚步。'},
            {val:'接单状态：每笔接单的状态及详细信息清晰展示，让您随时了解接单进展，保持掌控。'},
            {val:'打卡情况：记录每次接单课程的打卡情况明细，轻松管理教学进度。'},
            {val:'打卡操作：轻松操作订单打卡功能，选择当天打卡次数，并上传打卡凭证，确保教学记录真实可信。'},
          ]},
          {img:'static/img/techerIcon.png',val:'教师中心',goodsImg:'static/img/techerCenter.png',detailImg:'static/img/techerCenter2.png',desArr:[
              {val:'账号情况：展示教师的账号接单状态、累计提现金额、总业绩、接单数等数据，全面掌握。'},
              {val:'奖金明细：平台设置奖励机制，累计奖金金额、本月奖金等数据。'},
              {val:'流程介绍：展示教师的家教服务流程，奖励规则和违规惩罚规则，确保家教服务流程顺利。'},
              {val:'守则提示：提供教师守则提示，成就更优秀的教师。'},
          ]},
          {img:'static/img/shopSetIcon.png',val:'教师设置',goodsImg:'static/img/techerSet.png',desArr:[
            {val:'自定义状态：随时调整上线或休息状态，灵活安排您的教学时间，轻松应对各种教学需求。'},
            {val:'时间选择：自由设定可授课日期和时间，根据个人时间安排，打造最合适的教学时段，实现时间与效益的完美匹配。'},
            {val:'密码重置：个人中心进行密码重置，确保账号安全。'},
            {val:'关联课程：随时查看您关联的课程，了解教师的教学范围。'},
          ]},
        ]},
        {val:'管理后台',isPc:true,id:2,arr:[
          {img:'static/img/loginIcon.png',val:'后台登录',goodsImg:'static/img/techerPCLogin.png',detailImg:'static/img/techerPCLogin2.png',desArr:[
              {val:'两种方式登录：管理员登录方式可选择手机号加密码登录或手机号加验证码登录，便捷快速。'},
              {val:'安全保障：采用安全加密技术，保障您的账号信息安全，让您无需担心安全隐私泄露问题，放心使用。'},
              {val:'便捷操作：简洁直观的界面设计，操作简单易上手，管理员可轻松管理平台，高效便捷的管理员权限。'},
          ]},
          {img:'static/img/userIcon.png',val:'用户中心',goodsImg:'static/img/techerPCUser.png',desArr:[
              {val:'用户量实时掌握：了解平台用户总人数，洞悉用户规模和增长趋势，助您把握市场动态。'},
              {val:'用户数据展示：展示每位用户的详细信息，从消费习惯到订单情况，助力精准营销。'},
              {val:'用户消费情况：查看每个用户消费的金额，了解用户消费能力，为管理员提供灵活的策划，提升用户满意度。'},
          ]},
          {img:'static/img/orderIcon.png',val:'订单中心',goodsImg:'static/img/techerPCOrder.png',detailImg:'static/img/techerPCOrder2.png',desArr:[
              {val:'订单列表：清晰展示平台每一笔订单明细。'},
              {val:'订单总览：平台总订单金额和累计提现金额，洞悉平台的收益情况。'},
              {val:'订单查询：可通过日期、状态、审核状态等快速查询订单，查找所需信息，提高效率，节省时间。'},
              {val:'订单详情：订单详情页面展示了每笔订单的详细信息，管理员轻松了解订单的所有详细信息。'},
              {val:'订单审核：收到用户下单之后，管理员可进行二次订单确认审核，审核通过之后订单会自动派发到教师端需求大厅。'},
          ]},
          {img:'static/img/reportIcon.png',val:'举报列表',goodsImg:'static/img/techerPCReport.png',desArr:[
              {val:'举报列表：展示平台订单的举报情况，保障平台的安全和公平，让您能够迅速采取相应措施。'},
              {val:'举报处理：处理每一个举报，采取有效措施，确保平台秩序良好。'},
          ]},
          {img:'static/img/techerIcon.png',val:'教师中心',goodsImg:'static/img/techerPCTecher.png',detailImg:'static/img/techerPCTecher2.png',desArr:[
              {val:'教师列表：展示每一个教师的基本信息，对每一个教师的的情况一目了然，轻松管理。'},
              {val:'快速查询：通过教师名称快速查询到对应的教师，节约时间。'},
              {val:'扣费处理：对违规教师进行扣费处理，确保平台环境的公平和安全。'},
              {val:'教师详情：教师详情页展示了最全信息，包括收益提现等明细，管理员可全面了解每位教师的所以信息。'},
              {val:'便捷管理：新增、编辑教师等操作简单易上手，管理员可便捷的管理。'},
          ]},
          {img:'static/img/moneyIcon.png',val:'提现列表',goodsImg:'static/img/techerPCSub.png',detailImg:'static/img/techerPCSub2.png',desArr:[
              {val:'提现申请：展示教师的提现申请记录，记录每一笔提现的时间、提现人员、提现金额等信息。'},
              {val:'快速查询：通过提现单号、教师姓名、提现状态等快速查询对应订单，节省时间，提高效率。'},
              {val:'提现处理：可对提现申请进行提现通过和驳回的操作处理。'},
          ]},
          {img:'static/img/packIcon.png',val:'家教课程',goodsImg:'static/img/techerPCLess.png',detailImg:'static/img/techerPCLess2.png',desArr:[
              {val:'套餐列表：呈现家教学科各种课程列表展示，记录每一个课程的收益、价格等信息。'},
              {val:'精准搜索：通过课程名称搜索对应套餐，节省时间。'},
              {val:'灵活管理：管理员可自定义新增、删除、编辑课程操作，灵活应对家教平台需求。'},
          ]},
          {img:'static/img/shopOtherSetIcon.png',val:'其他设置',goodsImg:'static/img/techerPCSet.png',desArr:[
              {val:'微信客服：配置用户端客服微信，24/7在线解答您的疑问，为用户提供便捷沟通。'},
              {val:'咨询热线：设置客服热线，为用户解决问题，提供贴心的电话支持。'},
              {val:'关于我们：通过关于我们配置，让用户深入了解平台的服务理念，让用户放心选择，信赖本平台。'},
          ]},
          {img:'static/img/bannerIcon.png',val:'轮播图',goodsImg:'static/img/techerPCBanner.png',detailImg:'static/img/techerPCBanner2.png',desArr:[
              {val:'轮播图列表：展示家政平台的轮播图。'},
              {val:'便捷管理：通过轮播图新增、删除和编辑设置功能，轻松管理轮播图内容，提升用户体验。'},
          ]},
        ]},
      ],
      rowNavId:0,
      productNavArr:[],
      productNavId:0,
      goodArr:[
        {img:'static/img/upIcon.png',name:'需求量大',des:'县城家庭对于孩子的教育重视程度逐渐提升，家教市场潜力巨大。'},
        {img:'static/img/downIcon.png',name:'竞争相对较少',des:'相比大城市，县城同城家教平台竞争相对较少，有利于平台建立和发展。'},
        {img:'static/img/familyIcon.png',name:'家长群体',des:'繁忙的工作生活让他们需要灵活的家教服务来辅助孩子的学习。'},
        {img:'static/img/techerIcon.png',name:'教师群体',des:'有教学经验或专业技能的人士，希望通过家教平台提供服务来增加收入。'},
        {img:'static/img/gexinghuaIcon.png',name:'个性化教育需求增加',des:'家长对孩子的教育要求越来越个性化，对家教的需求也更加多样化。'},
        {img:'static/img/bookIcon.png',name:'在线教育兴起',des:'随着互联网的发展，线上家教市场不断扩大，为同城家教平台提供了更多发展机会。'},
      ],
      portArr:[
        {img:'static/img/suduIcon.png',name:'便捷快速',des:'提供快速匹配家教服务的平台，满足家长和教师的需求。'},
        {img:'static/img/anquanIcon.png',name:'安全可靠',des:'严格审核教师资质，保障家长和学生的安全。'},
        {img:'static/img/moneyIcon.png',name:'灵活收费',des:'通过抽取服务费的方式，平台实现盈利，同时给予教师合理收入。'},
        {img:'static/img/diyiIcon.png',name:'独家模式',des:'每个城市只出售给一个创业者，绝对无竞争，让您独享市场红利。'},
      ],
      stepArr:[
        {img:'static/img/number1.png',name:'准备工作',arr:[
          {val:'产品准备：同城家教线上预约平台软件'},
          {val:'人员准备：兼职家教人员、招聘传单发放员1～2个'},
          {val:'招聘方式：以线上社群或线下宣传单形式招聘兼职教师'},
          {val:'兼职薪资：兼职薪资按0底薪+80%提成招聘'},
          {val:'场地和时间：无需场地、时间自由、在家可做。'},
        ]},
        {img:'static/img/number2.png',name:'推广安排',arr:[
          {val:'准备家教宣传单在各学校门口发放。'},
          {val:'通过线上社群或朋友圈推广家教平台。'},
          {val:'电梯贴家教海报进行推广'},
        ]},
        {img:'static/img/number3.png',name:'后期工作',arr:[
          {val:'每个星期推一波用户，引导用户在平台找家教需求。'},
          {val:'教师招聘不断，可一直长期招聘下去，都是0底薪无成本。'},
          {val:'全自动订单派发，监督订单进度，订单结算。只需维护平台安全、正常运作即可，5分钟上手，操作简单。'},
        ]},
        {img:'static/img/number4.png',name:'预算成本',arr:[
          {val:'软件费用：购买《同城家教》软件，3980元终生版。'},
          {val:'兼职宣传单人员：10元/小时'},
          {val:'宣传单打印：0.1元/张'},
          {val:'微信支付认证300元/年'},
          {val:'域名证书98元/年'},
          {val:'赠送：终生产品维护及搭建，服务器免费使用，海报设计。'},
          {val:'承诺：一城一主，绝无竞争；无后续收费；指导运营。'},
        ]},
        {img:'static/img/number5.png',name:'收益分析',arr:[
          {val:'每完成一单家教订单，平台抽取20%的平台服务费作为盈利。（可自定义抽成比例）'},
          {val:'教师皆为兼职形式0底薪，完成一单结算一单提成，无需办公地址租赁，没有硬性的支出。'},
          {val:'有订单就有提成盈利，没有订单时候，也没有其他成本支出。'},
        ]},
        {img:'static/img/number6.png',name:'适宜对象',arr:[
          {val:'对同城互联网项目感兴趣的人可做'},
          {val:'作为副业经营的人可做'},
          {val:'同城低投资、轻创业者可做'},
          {val:'对家教领域项目感兴趣的人可做'},
        ]},
      ],
    };
  },
  props: {},
  methods: {
    navFn(item){
        this.$router.push({path:item.url})
    },
    rowNavFn(item){
      this.rowNavId = item.id
      this.productNavArr = item.arr
      this.productNavId = 0
    },
    productNavFn(index){
      this.productNavId = index
    },
    shopNavFn(index){
      this.shopNavId = index
    },
  },
  mounted() {
    $('html, body').animate({"scrollTop":0},0)
  },
  created() {
    this.productNavArr = this.rowNavArr[0].arr
  }
};
</script>

<style scoped lang="less">
.container{
  width: 100%;
  .headCont{
    min-width: 1200px;
    width: 100%;
    position: fixed;
    z-index: 10;
    left: 0px;
    top: 0px;
    height: 90px;
    // border-radius: 50px;
    background-color: rgba(255, 255, 255, 0.8);  
    display: flex;
    justify-content: space-between;
    padding: 0 50px;
    box-sizing: border-box;
    // box-shadow: 0 0 15px rgb(235,235,235);
    color: #6455d4;
    .logoCont{
      display: flex;
      align-items: center;
      img{
        width: 70px;
        // border-radius: 50%;
        margin-right: 20px;
      }
      .logoText{
        .logoName{
          font-size: 24px;
          font-weight: bold;
          font-family: cursive;
        }
        .logoEng{
          font-family: serif;
          font-size: 18px;
        }
      }
    }
    .navCont{
      display: flex;
      align-items: center;
      .navItem{
        width: 110px;
        box-sizing: border-box;
        font-size: 18px;
        line-height: 90px;
        margin-right: 30px;
        font-weight: bold;
        text-align: center;
        cursor: pointer;
        color: black;
        position: relative;
        transition: all 0.3s linear;
        .navLine,.navLine_no{
            width: 110px;
            height: 3px;
            background-color: #6455d4;
            position: absolute;
            bottom: 10px;
            left: 0;
            border-radius: 2px;
        }
        .navLine_no{
          transition: all 0.3s linear;
          width: 0;
        }
      }
      .navItem:hover .navLine_no{
        width: 110px;
      }
      .navItem:hover{
        color: #6455d4;
      }
      .navItemActive{
        color: #6455d4;
      }
      .telCont{
        margin-left: 50px;
        .telNum{
          font-size: 20px;
          display: flex;
          align-items: center;
          .iconfont{
            font-size: 30px;
            margin-right: 15px;
          }
        }
      }
    }
  }
  
  .bannerCont{
    width: 100%;
    background-color: #eae7ff;
    .bannerMask{
      width: 100%;
      padding: 150px 100px 50px;
      box-sizing: border-box;
      justify-content: center;
      align-items: center;
      display: flex;
      color: #6455d4;
      img{
        height: 500px;
      }
      .maskLeft{
        margin-right: 150px;
        .maskTitle{
          font-size: 40px;
          margin-bottom: 20px;
        }
        .maskdes{
          font-size: 24px;
          margin-bottom: 30px;
        }
        .maskVal{
          font-size: 16px;
          p{
            margin: 15px 0;
          }
        }
        .maskBtn{
          margin-top: 50px;
          width: 160px;
          // background-color: #fff;
          color: #6455d4;
          border-radius: 30px;
          line-height: 44px;
          border: 1px solid #6455d4;
          text-align: center;
          cursor: pointer;
          transition: all 0.15s linear;
          display: block;
          text-decoration: none;
        }
        .maskBtn:hover{
          background-color: #6455d4;
          border:1px solid #6455d4;
          color: #fff;
        }
      }
    }
  }
  .productCont{
    width: 90%;
    margin: 50px auto;
    .contName{
      width: 100%;
      text-align: center;
      color: #6455d4;
      .contName_china{
        font-size: 30px;
        font-weight: bold;
      }
      .contName_Eng{
        font-family: serif;
        font-size: 16px;
      }
      .contName_Des{
        margin-top: 10px;
      }
    }
    .productMain{
      margin-top: 50px;
      display: flex;
      .productNav{
        border-radius: 10px;
        overflow: hidden;
        .productNavItem,.productNavItemActive{
          width: 200px;
          padding: 0 15px;
          height: 70px;
          display: flex;
          align-items: center;
          background-color: #6455d4;
          cursor: pointer;
          border-bottom: 1px solid #fff;
          img{
            width: 35px;
            height: 35px;
            margin-right: 15px;
          }
          .productNavName{
            font-size: 18px;
          }
        }
        .productNavItem{
          background-color: #eae7ff;
        }
        .productNavItemActive{
          color: #fff;
        }
      }
      .productSwiper{
        flex: 1;
        width: 200px;
        margin-left: 50px;
        .productItem{
          width: 100%;
          display: flex;
          .phoneBox{
            width: 280px;
            position: relative;
            text-align: center;
            margin-right: 30px;
            img{
              width: 100%;
            }
            .phoneImg{
              position: absolute;
              top: 0;
              left: 0;
              z-index: 2;
            }
            .productImgCont{
              width: 245px;
              margin: 0 auto;
              overflow: hidden;
              border-radius: 10px;
              margin-top: 10px;
            }
            .productImg{
              width: 100%;
              border-radius: 20px;
            }
          }
          .productInfo{
            flex: 1;
            width: 100px;
            margin-left: 50px;
            .productInfoName{
              font-size: 25px;
            }
            .productInfoDes{
              font-size: 18px;
              margin-top: 30px;
              ul{
                padding-left: 0;
                li{
                  margin-bottom: 15px;
                }
              }
            }
          }
        }
        .PCProduct{
          display:block;
          .PCFlex{
            width: 100%;
            display: flex;
            justify-content: space-between;
            .PCBox{
              width: 48%;
              position: relative;
              .PCImg{
                width: 100%;
              }
              .PCProductImg{
                width: 100%;
                position: absolute;
                left: 4%;

                font-size: 0;
                top: 20px;
                img{
                  width: 92%;
                }
              }
            }
          }
          .productInfoName{
            font-size: 25px;
            text-align: center;
          }
          .productInfoDes{
            width: 100%;
            ul{
              display: flex;
              flex-wrap: wrap;
              justify-content: space-between;
              padding-left: 10px;
              li{
                margin-bottom: 15px;
                width: 48%;
              }
            }
          }
        }
      }
    }
    .portCont{
      width: 100%;
      margin-top: 30px;
      // justify-content: space-around;
      background-color: #eae7ff;
      display: flex;
      flex-wrap: wrap;
      .portItem{
        width: 20%;
        margin: 20px 2.5%;
        text-align: center;
        background-color: #fff;
        padding: 15px;
        box-sizing: border-box;
        background-color: #6455d4;
        border-radius: 15px;
        color: #fff;
        overflow: hidden;
        position: relative;
        .portMask{
          width: 100%;
          height: 100%;
          left: 0;
          top: 0;
          position: absolute;
          background-color: rgba(0, 0, 0, 0.3);
          display: flex;
          justify-content: center;
          align-items: center;
          opacity: 0;
          transition: all 0.3s linear;
          .portBtn{
            width: 150px;
            background-color: #fff;
            color: #6455d4;
            line-height: 40px;
            border-radius: 25px;
            cursor: pointer;
          }
        }
        .portImg{
          width: 100%;
          text-align: center;
          img{
            width: 35%;
          }
        }
        .portName{
          font-size: 22px;
          font-weight: bold;
          margin-bottom: 10px;
        }
        .portDes{

        }
      }
      .portItem:hover .portMask{
        opacity: 1;
      }
    }
    .orderStep{
      width: 100%;
      img{
        width: 100%;

      }
    }
    .goodCont{
      width: 100%;
      display: flex;
      padding: 30px 50px;
      box-sizing: border-box;
      flex-wrap: wrap;
      .goodItem{
        width: 45%;
        margin: 0 2.5%;
        // background-color: #6455d4;
        padding: 30px;
        box-sizing: border-box;
        border-radius: 15px;
        display: flex;
        align-items: center;
        margin-bottom: 30px;
        .goodImg{
          width: 100px;
        }
        // color: #fff;
        .goodText{
          margin-left: 30px;
          color: #666;
          .goodName{
            font-size: 24px;
            margin-bottom: 15px;
            display: flex;
            align-items: center;
            color: #6455d4;
            .goodLine{
              width: 3px;
              height: 24px;
              background-color: #6455d4;
              border-radius: 2px;
              margin-right: 10px;
            }
          }
        }
      }
    }
    .stepCont{
      width: 100%;
      display: flex;
      margin-top: 20px;
      flex-wrap: wrap;
      .stepItem{
        width: 27%;
        margin: 30px 2%;
        box-sizing: border-box;
        display: flex;
        .stepImg{
          width: 60px;
          height: 60px;
          font-size: 0;
          border-radius: 50%;
          background-color: #6455d4;
          justify-content: center;
          display: flex;
          align-items: center;
          margin-right: 15px;
          img{
            width: 70%;
          }
        }
        .stepInfo{
          width: 10px;
          flex: 1;
          .stepName{
            font-size: 24px;
            font-weight: bold;
            line-height: 60px;
          }
          ul{
            padding-left: 0;
            li{
              margin-bottom: 10px;
            }
          }
        }
      }
    }
    .sendCont{
        display: flex;
        width: 100%;
        margin: 30px auto;
        background-color: #eae7ff;
        padding: 15px;
        // justify-content: space-between;
        box-sizing: border-box;
        border-radius: 5px;

        .inputCont{
            background-color: #fff;
            padding: 15px 15px;
            box-sizing:border-box;
            border-radius: 5px;
            flex: 1;
            margin-right: 20px;
            input{
                width: 100%;
                background: none;
                border: none;
                outline: none;
                color: #6455d4;
            }
        }
        .subBtn{
            line-height: 54px;
            width: 180px;
            text-align: center;
            background-color:#6455d4;
            color: white;
            border-radius: 5px;
            cursor: pointer;
            transition: all 0.2s linear;
        }
        .subBtn:hover{
            opacity: 0.7;
        }
      }
  }
  .rowNavCont{
    display: flex;
    width: 900px;
    margin: 30px auto;
    justify-content: center;
    line-height: 60px;
    position: relative;
    .rowNavItem{
      width:300px;
      text-align: center;
      font-weight: bold;
      cursor: pointer;
      font-size: 20px;
      transition:all 0.3s linear;
      // color: #666;
    }
    .rowNavActive{
      color: #fff;
    }
    .rowNavLine{
      position: absolute;
      width: 300px;
      left: 0;
      bottom: 0;
      height: 60px;
      background-color: #6455d4;
      border-radius: 2px;
      transition:all 0.3s linear;
      z-index: -1;
      border-radius: 30px;
    }
  }
  .hasBg{
    background-color: #eae7ff;
    padding: 50px 0;
    border-radius: 15px;
  }
  
}
</style>
